<?xml version="1.0" encoding="UTF-8" ?>

<html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:p="http://primefaces.org/ui"
      	  xmlns:ui="http://java.sun.com/jsf/facelets"
      	  xmlns:t="http://myfaces.apache.org/tomahawk">
      	
      	
	<h:body>
    	<ui:composition template="../../templates/general.xhtml">
      		<ui:define name="content">
      		
      			<f:event type="preRenderView" listener="#{orientadoresBean.init}" />
				
				<h1 class="page-header">
					<i class="fa fa-user fa-3"></i> Orientadores
				</h1>
				
				<p:growl id="msgs" showDetail="true"/>
      			
      			<p:menuButton id="menuOrientadores" value="Opções" style="float:right;">
        			<p:menuitem value="Gravar" action="#{orientadoresBean.gravarEditar}" process="@this :form:orientadoresTable" update=":form:msgs :form:orientadoresTable" icon="ui-icon-disk" rendered="#{!orientadoresBean.disableComponent}"/>
        			<p:menuitem value="Editar" action="#{orientadoresBean.editar}" process="@this" update=":form:msgs :form:orientadoresTable :form:menuOrientadores" icon="ui-icon-arrowrefresh-1-w" rendered="#{orientadoresBean.disableComponent}"/>
        			<p:menuitem value="Novo Orientador" action="#{orientadoresBean.novo}" oncomplete="PF('orientadorDlg').show();" icon="ui-icon-arrowrefresh-1-w"/>
    			</p:menuButton>
				
				<p:dataTable id="orientadoresTable" var="orientador" value="#{orientadoresBean.orientadores}" style="margin-top:75px;"> 	
				
					<p:ajax event="rowToggle" onstart="test();" />
       				
       				<p:column style="width:45px; font-size: 0.9em;">
            			<p:rowToggler />
        			</p:column>
        			
        			<p:column headerText="Nome" style="font-size: 0.9em;">
            			<h:outputText value="#{orientador.nome}" />
        			</p:column>
					
					<p:column style="width:60px; font-size: 0.9em;">
						<p:commandButton icon="ui-icon-trash" title="Apagar grupo"
							style="font-size: 0.9em;"
							actionListener="#{orientadoresBean.apagar(orientador)}"
							update=":form:orientadoresTable :form:msgs" rendered="#{!orientadoresBean.disableComponent}">
							<p:confirm header="Confirmação"
								message="Tem a certeza que pretende eliminar este orientador?"
								icon="ui-icon-alert" />
						</p:commandButton>
					</p:column>
					
					<p:rowExpansion id="expOrientador">
       					<h:panelGroup style="border:none;" id="formOrientador">
       						<p:panelGrid  columns="2" columnClasses="tableAlunoLabel,tableAlunoValue" style="margin-bottom:30px;">
       						
       							<h:outputText value="Nome:" style="font-size: 0.9em;" />
                				<p:inputText value="#{orientador.nome}" disabled="#{orientadoresBean.disableComponent}" style="font-size: 0.9em;" />
                			
                				<h:outputText value="Email:" style="font-size: 0.9em;" />
                				<p:inputText value="#{orientador.email}" disabled="#{orientador.disableComponent}" style="font-size: 0.9em; width: 300px;" />
                			
                				<h:outputText value="User Github:" style="font-size: 0.9em;" />
                				<p:inputText value="#{orientador.userGitHub}" disabled="#{orientadoresBean.disableComponent}" style="font-size: 0.9em;" />
                			
                				<h:outputText value="User Redmine:" style="font-size: 0.9em;" />
                				<p:inputText value="#{orientador.userRedmine}" disabled="#{orientadoresBean.disableComponent}" style="font-size: 0.9em;" />
                			
                			</p:panelGrid>
                			
                			<h4 class="page-header">
								Grupos
							</h4>
                			
                			<h:panelGrid id="addGrupoGrid" columns="3" columnClasses="first,second,noBorder"
								style="margin-bottom:10px;"
								rendered="#{!orientadoresBean.disableComponent}">
								
								<h:outputLabel value="Escolha um grupo: " for="addGrupo"
									rendered="#{!orientadoresBean.disableComponent}"
									style="font-size: 0.9em;" />
								<p:autoComplete value="#{orientadoresBean.grupoSeleccionado}"
									id="addGrupo" completeMethod="#{gruposBean.completeGrupo(orientador)}"
									style="font-size: 0.9em;" var="g" itemLabel="#{g.numero}"
									itemValue="#{g}" converter="#{grupoConverter}"
									forceSelection="true"
									rendered="#{!orientadoresBean.disableComponent}">
									<p:column>
                    					Grupo #{a.numero}
                					</p:column>
								</p:autoComplete>
								<p:commandButton value="Adicionar" update=":form:msgs dataTableGrupos"
									action="#{orientadoresBean.adicionarGrupo(grupo)}"
									style="margin-left: 10px; font-size: 0.9em;"
									process="@this addGrupoGrid" />
                			</h:panelGrid>
                			
                			<h:panelGrid columns="1"  columnClasses="noBorder">
       							<p:dataTable id="dataTableGrupos" var="grupo" value="#{orientador.grupos}">
       								
       								<p:column style="width:45px; font-size: 0.9em;">
            							<p:rowToggler />
        							</p:column>
       								
       								<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Número 
            							</f:facet>
										
										<h:outputText value="#{grupo.numero}" />
									</p:column>
									
									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Nº alunos
            							</f:facet>
										
										<h:outputText value="#{grupo.numAlunos}" />
									</p:column>
									
									<p:column>
										<p:commandButton icon="ui-icon-trash"
											title="Eliminar grupo" style="font-size: 0.9em;"
											actionListener="#{orientadoresBean.eliminarGrupo(orientador,grupo)}"
											update=":form:msgs dataTableGrupos"
											rendered="#{!orientadoresBean.disableComponent}">
											
											<p:confirm header="Confirmação"
												message="Tem a certeza que pretende eliminar este grupo?"
												icon="ui-icon-alert" />
										</p:commandButton>
									</p:column>
									
									<p:rowExpansion>
										<p:dataTable id="dataTableAlunos" var="aluno" value="#{orientador.grupos.alunos}">
											
											<p:column style="font-size: 0.9em;">
												<f:facet name="header">  
                									Nome 
            									</f:facet>
										
												<h:outputText value="#{aluno.nome}" />
											</p:column>
											
											<p:column style="font-size: 0.9em;">
												<f:facet name="header">  
                									Número 
            									</f:facet>
										
												<h:outputText value="#{aluno.numero}" />
											</p:column>

											<p:column style="font-size: 0.9em;">
												<f:facet name="header">  
                									Email 
            									</f:facet>
										
												<h:outputText value="#{aluno.email}" />
											</p:column>
											
										</p:dataTable>
									</p:rowExpansion>
									
       							</p:dataTable>
       						</h:panelGrid>
       					</h:panelGroup>
       				</p:rowExpansion>	
					
				</p:dataTable>
				
				<p:confirmDialog global="true" showEffect="fade" hideEffect="fade"
					style="font-size: 0.9em;">
					<p:commandButton value="Sim" type="button"
						styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
						style="font-size: 0.9em;" />
					<p:commandButton value="Não" type="button"
						styleClass="ui-confirmdialog-no" icon="ui-icon-close"
						style="font-size: 0.9em;" />
				</p:confirmDialog>
				
				<p:dialog header="Novo Orientador" widgetVar="orientadorDlg" modal="true" resizable="false" width="600">
      				<h:panelGroup style="border:none;" id="formNovoOrientador">
      					<p:panelGrid  columns="2" columnClasses="tableAlunoLabel,tableAlunoValue" style="margin-bottom:30px;">
       						
       							<h:outputText value="Nome:" style="font-size: 0.9em;" />
                				<p:inputText value="#{orientadoresBean.novoOrientador.nome}" style="font-size: 0.9em;" />
                			
                				<h:outputText value="Email:" style="font-size: 0.9em;" />
                				<p:inputText value="#{orientadoresBean.novoOrientador.email}" style="font-size: 0.9em; width: 300px;" />
                			
                				<h:outputText value="User Github:" style="font-size: 0.9em;" />
                				<p:inputText value="#{orientadoresBean.novoOrientador.userGithub}" style="font-size: 0.9em;" />
                			
                				<h:outputText value="User Redmine:" style="font-size: 0.9em;" />
                				<p:inputText value="#{orientadoresBean.novoOrientador.userRedmine}" style="font-size: 0.9em;" />
                			
                			</p:panelGrid>
                			
                			<h4 class="page-header">
								Grupos
							</h4>
                			
                			<h:panelGrid id="addGrupoGridNovo" columns="3" columnClasses="first,second,noBorder"
								style="margin-bottom:10px;"
								rendered="#{!orientadoresBean.disableComponent}">
								
								<h:outputLabel value="Escolha um grupo: " for="addGrupoNovo"
									rendered="#{!orientadoresBean.disableComponent}"
									style="font-size: 0.9em;" />
								<p:autoComplete value="#{orientadoresBean.grupoSeleccionado}"
									id="addGrupo" completeMethod="#{gruposBean.completeGrupo(orientadoresBean.novoOrientador)}"
									style="font-size: 0.9em;" var="g" itemLabel="#{g.numero}"
									itemValue="#{g}" converter="#{grupoConverter}"
									forceSelection="true"
									rendered="#{!orientadoresBean.disableComponent}">
									<p:column>
                    					Grupo #{a.numero}
                					</p:column>
								</p:autoComplete>
								<p:commandButton value="Adicionar" update=":form:msgs dataTableGrupos"
									action="#{orientadoresBean.adicionarGrupo(orientadoresBean.novoOrientador)}"
									style="margin-left: 10px; font-size: 0.9em;"
									process="@this addGrupoGridNovo" />
                			</h:panelGrid>
                			
                			<h:panelGrid columns="1"  columnClasses="noBorder">
       							<p:dataTable id="dataTableGruposNovo" var="grupo" value="#{orientadoresBean.novoOrientador.grupos}">
       								
       								<p:column style="width:45px; font-size: 0.9em;">
            							<p:rowToggler />
        							</p:column>
       								
       								<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Número 
            							</f:facet>
										
										<h:outputText value="#{grupo.numero}" />
									</p:column>
									
									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Nº alunos
            							</f:facet>
										
										<h:outputText value="#{grupo.numAlunos}" />
									</p:column>
									
									<p:column>
										<p:commandButton icon="ui-icon-trash"
											title="Eliminar grupo" style="font-size: 0.9em;"
											actionListener="#{orientadoresBean.eliminarGrupo(orientadoresBean.novoOrientador,grupo)}"
											update=":form:msgs dataTableGruposNovo"
											rendered="#{!orientadoresBean.disableComponent}">
											
											<p:confirm header="Confirmação"
												message="Tem a certeza que pretende eliminar este grupo?"
												icon="ui-icon-alert" />
										</p:commandButton>
									</p:column>
									
									<p:rowExpansion>
										<p:dataTable id="dataTableAlunos" var="aluno" value="#{orientadoresBean.novoOrientador.grupos.alunos}">
											
											<p:column style="font-size: 0.9em;">
												<f:facet name="header">  
                									Nome 
            									</f:facet>
										
												<h:outputText value="#{aluno.nome}" />
											</p:column>
											
											<p:column style="font-size: 0.9em;">
												<f:facet name="header">  
                									Número 
            									</f:facet>
										
												<h:outputText value="#{aluno.numero}" />
											</p:column>

											<p:column style="font-size: 0.9em;">
												<f:facet name="header">  
                									Email 
            									</f:facet>
										
												<h:outputText value="#{aluno.email}" />
											</p:column>
										</p:dataTable>
									</p:rowExpansion>
       							</p:dataTable>
       						</h:panelGrid>
      				</h:panelGroup>
      				
      				<p:commandButton id="gravarNovo" value="Gravar" process="@this :form:formNovoOrientador" action="#{orientadoresBean.gravarNovo}" oncomplete="PF('orientadorDlg').hide();" update=":form:msgs :form:orientadoresTable" style="margin-top:10px; font-size: 0.9em;" />
       				<p:commandButton id="cancelarNovo" value="Cancelar" action="#{orientadoresBean.novo}" oncomplete="PF('orientadorDlg').hide();" style="font-size: 0.9em; margin-top:10px; margin-left:10px;" />
      				
      			</p:dialog>	
				
				
				<script type="text/javascript">
    				function test(){
        				var i = $('#expOrientador .ui-row-toggler.ui-icon-circle-triangle-s').length;
        				if(i == 1){return;}
            				$('#expOrientador .ui-row-toggler.ui-icon-circle-triangle-s').trigger('click');
    				}
				</script>
				
			</ui:define>
		</ui:composition>
	</h:body>
</html>			